<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changeName">改变名称</button>
    <button @click="getTest">获取test</button>
    <button @click="setTest">设置test</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化的时候就会将各属性递归进行defineProperty
      obj: { name: "jack" },
    };
  },
  methods: {
    changeName() {
      this.obj.name = "rose";
      // 触发了obj.name属性的defineProperty
      // 引发了后续water的数据更新
    },
    getTest() {
      console.log(this.$test);
    },
    setTest() {
      this.$test = "123";
    },
  },
};
</script>

<style>
</style>